<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="版本服务" name="version">
                <div class="server-package maxW1168">
                    <div class="title"></div>
                    <!-- 悬浮 -->
                    <ul class="scroll-show-wrap maxW1168" style="left: 475.5px" v-show="showScrollWrap">
                        <li class="scroll-tips">
                            <div class="wraper">
                                <div class="tips-div">
                                    <p class="tips-row">
                                        <span class="solid-dot"></span>
                                        <span class="tip-text">包含</span>
                                    </p>
                                    <p class="tips-row">
                                        <span class="hollow-dot"></span>
                                        <span class="tip-text">不包含（支持独立购买）</span>
                                    </p>
                                    <p class="tips-row">
                                        <span class="line-dot"></span>
                                        <span class="tip-text">不包含（不支持独立购买）</span>
                                    </p>
                                </div>
                                <div class="scroll-version-name"><span></span></div>
                            </div>
                        </li>
                        <li class="scroll-buy-li">
                            <div class="wraper">
                                <h2 class="version-title">标准版</h2>
                                <div class="scroll-show-div scroll-open-normal">
                                    <span class="version-price">¥4800</span>
                                    <span class="version-name">开通标准版</span>
                                </div>
                            </div>
                        </li>
                        <li class="scroll-buy-li">
                            <div class="wraper">
                                <h2 class="version-title">专业版</h2>
                                <div class="scroll-show-div scroll-open-profession">
                                    <span class="version-price">¥7999</span>
                                    <span class="version-name">开通专业版</span>
                                </div>
                            </div>
                        </li>
                        <li class="scroll-buy-li">
                            <div class="wraper">
                                <h2 class="version-title">旗舰版</h2>
                                <div class="scroll-show-div scroll-selected-flagship">
                                    <span class="version-price">¥19999</span>
                                    <span class="version-name">开通旗舰版</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="list">
                        <div class="package-item package-item__normal">
                            <div class="package-header"><div class="package-title">标准版</div></div>
                            <div class="package-box">
                                <div class="package-intro">适合初创型团队，满足线上内容承载、营销推广等基础经营需求。</div>
                                <div class="package-price">
                                    <span class="package-price-symbol">￥</span>
                                    <span class="package-price-value">4800</span>
                                    <span class="package-price-unit">/年</span>
                                </div>
                                <div class="old-price"></div>
                                <button class="package-btn buy-normal-btn" @click="preview()">立即购买</button>
                            </div>
                        </div>

                        <div class="package-item package-item__edu">
                            <div class="package-header">
                                <div class="recommended">
                                    <img src="../../images/icon-recommended.png" />
                                </div>
                                <div class="package-title"><span>专业版</span></div>
                                <div class="package-desc">包含「标准版」全部功能</div>
                                <div class="package-recommend-img"></div>
                            </div>
                            <div class="package-box">
                                <div class="package-intro">
                                    适合注重学习效果和服务的成长型团队，实现引流获客、学练考一体化、社交裂变、用户运营等核心经营需求。
                                </div>
                                <div class="package-price">
                                    <span class="package-price-symbol">￥</span>
                                    <span class="package-price-value">7999</span>
                                    <span class="package-price-unit">/年</span>
                                </div>
                                <div class="old-price"></div>
                                <button class="package-btn buy-or-upgrade-profession" @click="preview()">立即购买</button>
                            </div>
                        </div>

                        <div class="package-item package-item__flagship">
                            <div class="package-header">
                                <div class="package-title">旗舰版</div>
                                <div class="package-desc">包含「标准版&amp;专业版」全部功能</div>
                            </div>
                            <div class="package-box">
                                <div class="package-intro">
                                    适合较大业务规模的成熟型团队。进行个性化品牌营销、深度化商业变现、精细化用户运营等规模化经营需求。
                                </div>
                                <div class="package-price">
                                    <span class="package-price-symbol">￥</span>
                                    <span class="package-price-value">19999</span>
                                    <span class="package-price-unit">/年</span>
                                </div>
                                <div class="old-price"></div>
                                <!-- <div class="package-toast">
                                    <div>当前不支持同时选购多个版本服务</div>
                                    <div>如需更换，请从购物车删除后再重新选购</div>
                                </div> -->
                                <button class="package-btn buy-or-upgrade-flagship" @click="preview()">立即购买</button>
                            </div>
                        </div>
                    </div>
                    <!-- 功能列表 -->
                    <div class="func-wrap">
                        <ul class="list-row func-column-list">
                            <li class="func-intro">功能介绍</li>
                            <li class="func-version">标准版</li>
                            <li class="func-version">专业版</li>
                            <li class="func-version">旗舰版</li>
                        </ul>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">知识商品</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">图文课程</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">音频课程</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">视频课程</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">直播课程</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">专栏</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">会员</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">训练营</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">AI互动课</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">电子书</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">付费问答</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">实物商品</li>
                            </ul>

                            <div class="func-list-group">
                                <div class="func-name-group-wrap">
                                    <div class="func-name func-name-group">实物售卖</div>
                                    <div class="func-name func-name-group">课程带货</div>
                                    <div class="func-name func-name-group">直播带货</div>
                                </div>
                                <div class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <div class="text-html marginLeft-5">¥1988/年</div>
                                </div>
                                <div class="func-dot">
                                    <span class="solid-dot"></span>
                                </div>
                                <div class="func-dot">
                                    <span class="solid-dot"></span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">直播营销</li>
                            </ul>

                            <div class="func-list-group">
                                <div class="func-name-group-wrap">
                                    <div class="func-name func-name-group">语音直播</div>
                                    <div class="func-name func-name-group">录播视频+语音直播</div>
                                    <div class="func-name func-name-group">PPT直播</div>
                                    <div class="func-name func-name-group">图片放映+语音直播</div>
                                    <div class="func-name func-name-group">桌面共享直播</div>
                                    <div class="func-name func-name-group">应用窗口共享直播</div>
                                    <div class="func-name func-name-group">直播回看</div>
                                    <div class="func-name func-name-group">圆桌会议</div>
                                    <div class="func-name func-name-group">直播间打赏</div>
                                    <div class="func-name func-name-group">直播间连麦</div>
                                    <div class="func-name func-name-group">画板涂鸦</div>
                                    <div class="func-name func-name-group">实时直播数据</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">不限人次，免流量费，零延迟</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">不限人次，免流量费，零延迟</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">不限人次，免流量费，零延迟<br />直播视频拉流</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">在线学员列表</li>
                                <li class="func-dot"></li>
                                <li class="func-dot"></li>
                                <li class="func-dot"></li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">直播转播</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">直播回放清晰度</li>
                                <li class="func-dot">
                                    <span class="text-html">高清720P</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">高清720P</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">直播原清晰度</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">班课</li>
                            </ul>

                            <div class="func-list-group">
                                <div class="func-name-group-wrap">
                                    <div class="func-name func-name-group">视频互动直播</div>
                                    <div class="func-name func-name-group">互动连麦</div>
                                    <div class="func-name func-name-group">随机选人</div>
                                    <div class="func-name func-name-group">在线抢答</div>
                                    <div class="func-name func-name-group">举手发言</div>
                                    <div class="func-name func-name-group">奖励勋章</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">新客户赠送100元流量费用</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">新客户赠送1000元流量费用</div>
                                </div>
                                <div class="func-dot func-grup-item">
                                    <span class="solid-dot"></span>

                                    <div class="text-html marginLeft-5 grey-text">新客户赠送10000元流量费用</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">教培产品</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">面授课程</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">报名表单</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">线索管理</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">教务管理</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">学员管理</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">企培产品</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">组织管理</li>
                                <li class="func-dot">
                                    <span class="text-html">基础支持150人，可扩容</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">基础支持450人，可扩容</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">基础支持800人，可扩容</span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">内训模式</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">助学工具</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">圈子</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">打卡</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">考试</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">作业本</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">练习</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">题库</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">证书</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">随堂检测</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">营销玩法</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">推广员</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">买赠</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">邀请码</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">兑换码</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">优惠券</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">有价优惠券</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">优惠码</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">拼团</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">划线价格</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">请好友看</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">限时折扣</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">弹窗广告</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">支付有礼</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">裂变海报</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥588/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">涨粉神器</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">秒杀</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">测试互动</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">商品推荐</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥588/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">用户管理</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">表单</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥388/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">信息采集</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥588/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">超级会员</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">积分商城</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">活动管理</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">版权保护</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">内容加密</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">固定水印</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">浏览器防录屏</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">防录屏跑马灯</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">播放域名防盗链</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">课程查看限制</li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="line-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">课程分销</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">店铺内容分销市场</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">配套工具</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">视频清晰度</li>
                                <li class="func-dot">
                                    <span class="text-html">高清720P</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">高清720P</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">超清1080P</span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">页面统计</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">二维码/短链生成</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">短信群发</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">按需购买</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">按需购买</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">按需购买</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">多终端支持</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">微信H5店铺</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">微信小程序</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥1888/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">PC端独立官网</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥3988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥3988/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">
                                    SDK服务
                                    <span class="func-redText">流量补贴中</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥49800/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥49800/年</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">¥49800/年</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">知识店铺基础功能</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">店铺管理</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">订单管理</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">商品管理</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">数据分析</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">资产管理</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">品牌形象包</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">信息隐藏</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">素材中心</li>
                                <li class="func-dot">
                                    <span class="text-html">200GB存储空间</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">400GB存储空间</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">1000GB存储空间</span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">下载中心</li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">管理员帐号</li>
                                <li class="func-dot">
                                    <span class="text-html">3个</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">30个</span>
                                </li>
                                <li class="func-dot">
                                    <span class="text-html">300个</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="list-row func-type">
                                <li class="func-dot-title">未来新增能力</li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">新增获客渠道</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">待定价</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">待定价</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                            <ul class="list-row func-list list-row func-li-line">
                                <li class="func-name">最新营销/管理/分析工具使用权益</li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">待定价</span>
                                </li>
                                <li class="func-dot">
                                    <span class="hollow-dot"></span>

                                    <span class="text-html marginLeft-5">待定价</span>
                                </li>
                                <li class="func-dot">
                                    <span class="solid-dot"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="功能服务" name="function">
                <div class="server-tool server-tool__sp">
                    <div class="tool-menu">
                        <div class="tool-type-title"><span>未开通</span></div>
                        <div class="tool-type">
                            <a
                                v-for="(item, index) in toolType"
                                :key="index"
                                @click="active(index)"
                                class="tool-type-item"
                                :class="{ 'tool-type-item__selected': index == current }"
                            >
                                {{ item.item }}
                            </a>
                        </div>
                    </div>
                    <div class="tool-list-wrap tool-list-wrap__all">
                        <div v-for="(item, index) in tableData" :key="index" class="tool-list">
                            <div
                                v-for="(detailItem, index) in item"
                                :key="index"
                                @click="addActive(detailItem.id, detailItem.price, detailItem.img_url, detailItem.name)"
                                class="tool-item"
                                :class="{ 'selected-tool-item': addCurrent.indexOf(detailItem.id) > -1 }"
                                style="margin-left: 2%"
                            >
                                <div class="item-wrap">
                                    <div class="item-left">
                                        <img :src="`${detailItem.img_url}`" class="item-avatar" />
                                        <div class="item-text">
                                            <div class="item-name">
                                                {{ detailItem.name }}
                                                <span class="item-money">¥{{ detailItem.price }}元/年</span>
                                            </div>
                                            <div class="item-tips">{{ detailItem.short_descrb }}</div>
                                        </div>
                                    </div>
                                    <div class="item-right"></div>
                                </div>
                                <div class="is-use-info">
                                    <span>旗舰版及专业版免费可用</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tool-type-title"><span>已开通</span></div>
                    <div class="tool-list-empty">
                        <div class="tool-list-empty-title">暂无内容</div>
                        <div class="tool-list-empty-tips">切换其他类型看看</div>
                    </div>
                </div>
            </el-tab-pane> -->
        </el-tabs>
		
		<!-- 立即购买 弹出框 -->
		<el-dialog :title="title" :visible.sync="previewDialogVisible" width="25%">
		    <div class="preview">
		        <h3>扫码加微信</h3>
				<img style="width:80%" :src="qrsrc" />
		    </div>
		</el-dialog>
		
        <!-- 隔离层 -->
        <div class="space"></div>
        <!-- 公共购物车 -->
        <div class="purchaseCart">
            <div class="content-part">
                <div title="打开购物车" @click="openShopcar" class="chosen-service">
                    已选服务：<span>{{ selectPrice.length }}</span> <a href="javascript:void(0)" class="triangle"></a>
                </div>
                <div class="total-price">
                    合计：<span>{{ totalPrice }} 元</span><del class="line-price"></del>
                </div>
                <button class="go-to-purchase" :class="[selectPrice.length!==0 ? orangeClass : greyClass]">下一步</button>
            </div>
            <div class="chosen-list-box" v-show="shopcar" ref="shopcar">
                <div class="box-title">
                    <span>已选服务</span> <span class="service-content-tip"></span> <span @click="closeShopcar" class="close-icon"></span>
                </div>
                <div class="chosen-list">
                    <div
                        v-for="(item, index) in selectPrice"
                        :key="index"
                        class="service-item"
                        @mouseover="mouseOver"
                        @mouseleave="mouseLeave"
                        ref="serviceItem"
                    >
                        <div class="image">
                            <img :src="`${item.img_url}`" alt="..." />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="price">{{ item.price }}元/年</div>
                        <a @click="delService(index)" class="delete-icon" v-show="icon_del"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { functionServiceData,getCustomerServiceQR } from '../../api/index';
export default {
    data() {
        return {
			qrsrc:"",
            activeName: 'version',
            showScrollWrap: false,
            shopcar: false,
            icon_del: false,
            current: 0,
            addCurrent: [],
            selectPrice: [],
            orangeClass: 'orange',
            greyClass: 'grey',
            toolType: [
                { item: '全部' },
                { item: '营销工具' },
                { item: '助学工具' },
                { item: '知识商品' },
                { item: '多终端' },
                { item: '线上课程' },
                { item: '实物商品' },
                { item: '用户运营' }
            ],
            tableData: [],
            pageTotal: '',
			previewDialogVisible: false,
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        // 监听滚动事件
        window.addEventListener('scroll', this.handleScroll, true);
        // 监听鼠标按下事件，关闭购物车弹窗
        window.addEventListener('mouseup', (e) => {
            let shopcarPopup = this.$refs.shopcar;
            console.log(shopcarPopup, '222222222');
            if (shopcarPopup) {
                if (!shopcarPopup.contains(e.target)) {
                    this.shopcar = false;
                }
            }
        });
    },

    computed: {
        totalPrice() {
            //计算总价格
            let total = 0;
            this.selectPrice.forEach((item) => {
                total += item.price;
            });
            return total;
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleScroll() {
            let scrollTop =
                document.getElementsByClassName('content')[0].scrollTop || document.getElementsByClassName('content')[0].scrollTop;
            if (scrollTop > 600) {
                this.showScrollWrap = true;
            } else {
                this.showScrollWrap = false;
            }
        },
        // 购物车
        openShopcar() {
            this.shopcar = true;
        },
        closeShopcar() {
            this.shopcar = false;
        },
        //鼠标进入进出事件
        mouseOver() {
            this.icon_del = true;
        },
        mouseLeave() {
            this.icon_del = false;
        },
        // 动态添加class
        active(index) {
            this.current = index;
            console.log(this.current);
        },
        addActive(id, price, img_url, name) {
            this.shopcar = true;
            let arrIndex = this.addCurrent.indexOf(id);
            if (arrIndex > -1) {
                this.shopcar = true;
                this.addCurrent.splice(arrIndex, 1);
                this.selectPrice.splice(arrIndex, 1);
            } else {
                this.addCurrent.push(id);
                let selectObj = {};
                selectObj.id = id;
                selectObj.name = name;
                selectObj.img_url = img_url;
                selectObj.price = price;
                this.selectPrice.push(selectObj);
            }
            if(this.selectPrice.length == 0) {
                this.shopcar = false;
            } 
            console.log(this.addCurrent);
            console.log(this.selectPrice);
        },
        delService(index) {
            this.selectPrice.splice(index, 1);
            this.addCurrent.splice(index, 1);
            if(this.selectPrice.length == 0) {
                this.shopcar = false;
            } 
        },
        getData() {
            functionServiceData(this.query).then((res) => {
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
		
		// 立即购买 弹窗
		preview() {
			console.log(localStorage);
			getCustomerServiceQR().then((res) => {
				if(res.code==1){
					this.qrsrc='https://api.nashicike.top/image/'+res.data.url
					  this.previewDialogVisible = true;
				}
				
			});
		},
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';
@import './css/service_buy.css';
</style>

<style>
.el-backtop {
    bottom: 100px !important;
}
.el-tabs__header {
    margin: 0;
}
.preview {
    padding: 30px;
    text-align: center;
}
</style>
